<template>
	<view class="ljs-top" :style="'height: calc('+statusBarHeight+'px + '+topHeight+'px)'">
		<!-- <view class="topZw">
			<view class="comStatus" :style="'height: '+statusBarHeight+'px'"></view>
			<view class="topMain" :style="'height: '+topHeight+'rpx'"></view>
		</view> -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="top" :style="{
			'background': !backgroundImageShow?backgroundColor:('url('+backgroundImage+') no-repeat;'),
			backgroundSize: '100% 100%'
		}">
		<view class="top" :style="topStyle">
		<!-- #endif -->
			<!-- 这里是状态栏 占据高度 -->
			<view class="comStatus" :style="{height: statusBarHeight+'px',backgroundColor: topBackgroundColor}"></view>
			<view class="topMain"  :style="{height: topHeight+'px',
											marginTop: navMarginTop+ 'px',
											background: topMainBackGroundColor}">
				<!-- 返回 -->
				<view @click="goBack" class="back" v-if="myback.show">
					<!-- <view class="img">{{myback.imgUrl}}</view> -->
					<image class="img" :src="myback.imgUrl"></image>
				</view>
				<slot></slot>
				<!-- 标题文字 -->
				<text class="title" :style="{'color': titleColor}">{{title}}</text>
			</view>
		</view>
		<!-- <view class="yuanhu"></view> -->
	</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态按钮高度
				myback: {
					// 是否显示返回按钮
					show: true,
					// 是否显示返回按钮
					imgUrl: require('../../static/images/postDetail/goback.png')
				},
				// top样式
				topStyle: {}
			}
		},
		props: {
			// 标题内容
			title: String,
			// 标题颜色
			titleColor: {
				type: String,
				default: '#000'
			},
			// 返回按钮相关配置
			back: {
				type: Object,
				default: function() {
					return {
						// 是否显示返回按钮，默认显示
						show: true,
						// 返回按钮的图片地址
						imgUrl: require('../../static/images/postDetail/goback.png')
					}
				}
			},
			// 开启背景图片，未开启，使用背景颜色，开启backgroundImage为必填项
			backgroundImageShow: {
				type: Boolean,
				default: false
			},
			// 背景颜色，支持渐变色，如：linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B);
			topMainBackGroundColor: {
				type: String,
				default: '#fff'
			},
			topBackgroundColor: {
				type: String,
				default: '#fff'
			},
			// 背景图片地址，使用前需配置backgroundImageShow为true。
			backgroundImage: String,
			// 高度（除状态栏）
			topHeight: {
				type: Number,
				default: 38
			},
			 n : {
				type: Number,
				default: 10
			}
		},
		mounted() {
			this.init();
		},
		created() {
			console.log('搞',this.topMainBackGroundColor)
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			init() {
				// #ifdef MP-WEIXIN
				// #endif
				// #ifndef MP-WEIXIN
				if (this.backgroundImageShow) {
					this.topStyle = {
						'background-image': 'url('+this.backgroundImage+')',
						'background-repeat': 'no-repeat',
						backgroundSize: '100% 100%'
					}
				} else {
					this.topStyle = {
						'background': this.backgroundColor
					}
				}
				// #endif
				this.statusBarHeight = this.getSysInfo().statusBarHeight;
				for (let key in this.back) {
					this.myback[key] = this.back[key];
				}
			},
			getSysInfo() {
				return uni.getSystemInfoSync();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ljs-top{
		width: 750rpx;
		.topZw{
			width: 750rpx;
			.comStatus{
				width: 750rpx;
				position: relative;
			}
			.topMain{
				width: 750rpx;
			}
		}
		.top{
			width: 750rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			.comStatus{
				width: 750rpx;
				// margin-bottom: 10rpx;
				position: relative;
			}
			.topMain{
				display: flex;
				align-items: center;
				width: 750rpx;
				padding-bottom: 10px;
				box-sizing: border-box;
				// position: relative;
				.back{
					width: 32upx;
					height: 40upx;
					box-sizing: border-box;
					margin-left: 5px;
					margin-top: 20rpx;
					z-index: 2;
					.img{
						width: 100%;
						height: 100%;
						display: block;
					}
				}
				.title{
					height: 58upx;
					line-height: 58upx;
					text-align: center;
					position: relative;
					top: 11upx;
					z-index: 1;
					color: #FFF;
					font-size: 32upx;
				}
			}
		}
		.yuanhu{
			width: 750rpx;
			height: 30upx;
			border-radius: 30upx 30upx 0 0;
			background-color: #FFF;
			opacity: 0.1;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1001;
		}
	}
</style>
